<template name="GeneralListItem">
	<view class="component_container" @click="clickCall">
		<view class="icon" v-if="icon_class">
			<text :class="['iconfont', icon_class]" :style="{ color: icon_color ? icon_color : '#000', 'font-size': icon_size ? icon_size + 'rpx' : '35rpx' }"></text>
		</view>
		<view class="left">
			<view class="main_title">
				<!-- 主文本 -->
				<text class="main_title_text">{{ title1 }}</text>
			</view>
		</view>
		<view class="right">
			<slot name="deputy_title">
				<view class="deputy_title">
					<text class="deputy_title_text">{{ title2 }}</text>
				</view>
			</slot>
			<text class="iconfont icon-b-2" v-if="!no_arrow"></text>
		</view>
	</view>
</template>

<script>
export default {
	name: 'GeneralListItem',
	props: ['title1', 'title2', 'icon_class', 'icon_color', 'icon_size', 'no_arrow', 'index'],
	data() {
		return {};
	},
	methods: {
		clickCall() {
			if(this.index){
				this.$emit('clickCall', this.index);
			}else{
				this.$emit('clickCall');
			}
		}
	}
};
</script>

<style lang="scss">
$height: 70rpx;

.component_container {
	width: 100%;
	flex-wrap: nowrap;
	min-height: $height;
	align-items: center;
	.icon {
		margin-left: 20rpx;
	}
	.left {
		width: 49%;
		align-items: center;
		border-bottom: 1rpx #f5f5f5 solid;
		min-height: $height;
		.main_title {
			padding-left: 10rpx;
		}
	}
	.right {
		padding-right: 20rpx;
		min-height: $height;
		justify-content: flex-end;
		width: 49%;
		align-items: center;
		border-bottom: 1rpx #f5f5f5 solid;
		.deputy_title_text {
			font-size: 25rpx;
			color: #555555;
			padding-right: 10rpx;
		}
		.icon-b-2 {
			font-size: 35rpx;
			vertical-align: middle;
		}
	}
}
</style>
